<!-- 商品讲解 -->
<template>
	<view>
		<!-- @leftClick="$tools.switchTab('index/index')" -->
		<u-navbar title="选择商品讲解" bgColor="transparent" leftIconColor="#fff" :titleStyle="{'color':'#fff'}" placeholder
			autoBack></u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<view class="listBox" v-if="livelist.length>0">
					<view class="pd30 item" v-for="(i,idx) in livelist" @click="handel(i,idx)">
						<view class="dfx box">
							<view class="icon1">
								{{idx+1}}
							</view>
							<view class="info">
								<view class="title">
									{{i.name}}
								</view>
								<view class="num df jb fs26">
									<text>讲解音频：{{i.audio_urls.length}} 条</text>
									<text>直播互动：{{i.interact_ids.length}} 条</text>
								</view>
							</view>
							<view class="edit">
								<u-checkbox :customStyle="{marginBottom: '8px'}" label=" " :name="i.id">
								</u-checkbox>
							</view>
						</view>
					</view>
				</view>
				<!-- 内容为空 -->
				<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无商品讲解" v-else mode="search"></u-empty>
			</u-checkbox-group>
		</scroll-view>
		<view class="btnBox">
			<view class="btn btn1 cfff" @click="saveChoose">
				添加商品讲解
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				show: false,
				isPlay: -1,
				title: '',
				livelist: [],
				explains: [],
				candidates: [],
				activeInfo: {},
				activeId: '',
				id: '',
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.id = e.id
			}
			this.getData()
			this.$tools.loadbgaudio()
		},
		onReachBottom() {
			if (this.formInline.total > this.formInline.page) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			ReachBottom() {
				if (this.formInline.total > this.formInline.page) {
					this.formInline.page++
					this.getData();
				}
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			getData() {
				let params = {
					...this.formInline
				}
				if (this.id) params.scheme_id = this.id
				this.$api.explainList(params).then(res => {
					if (res.code == 200) {
						// this.$nextTick(() => {
						if (this.formInline.page == 1) {
							this.livelist = res.data.list
						} else {
							this.livelist = this.livelist.concat(res.data.list)
						}
						this.formInline.total = res.data.count
						// if (this.isOpen && this.isOpen != -1 && this.isOpen != this.livelist.length - 1) {
						// 	console.log('clear');
						// 	this.isOpen = -1
						// 	this.$tools.clearAudio()
						// }
						// })

						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			confirm() {
				this.$refs.uForm.validate().then(res => {
					this.show = false
					let params = {
						...this.formData
					}
					this.$api.addExplain(params).then(res => {
						this.$tools.toast(res.msg);
						if (res.code == 200) {
							this.close()
							this.getData()
						}
					})
				})
			},
			choose(i) {
				this.$tools.navTo(`audioLibrary/chooseItem?id=${i.id}&type=explain`)
			},
			handel(j) {
				console.log(j);
				if (this.isPlay) {
					this.isPlay = -1
					this.$tools.clearAudio()
				}
				if (this.activeId) {
					if (this.activeId == j.id) {
						this.activeId = ''
						return
					} else {
						this.activeId = ''
					}
				}
				this.livelist.map((i, index) => {
					if (j.id == i.id) {
						this.activeId = i.id
					}
				})
				this.$forceUpdate()

			},
			handelClick(i) {
				uni.showActionSheet({
					itemList: ['管理关联的直播互动', '删除该话术'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						switch (res.tapIndex) {
							case 0:
								this.$tools.navTo(`audio/interaction?id=${i.id}`)
								break;
							case 1:
								this.delItem(i)
								break;
							default:
								break;
						}
					},
					fail(res) {
						console.log(res.errMsg);
					}
				});
			},
			play(j) {
				if (j) {
					this.isPlay = j.id
					this.$tools.setA(j.url)
				} else {
					this.$tools.setA()
					this.$nextTick(() => {
						this.isPlay = -1
					})
				}
			},
			delItem(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: (r) => {
						if (r.confirm) {
							let params = {
								id: i.id
							}
							this.$api.delExplain(params).then(res => {
								this.$tools.toast(res.msg);
								if (res.code == 200) {
									this.livelist = []
									this.getData()
								}
							})
						} else if (r.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delAudio(i) {
				uni.showModal({
					title: '提示',
					content: '确认删除吗？删除后将无法找回',
					success: r => {
						if (r.confirm) {
							let params = {
								audio_id: i.id,
								interact_id: this.activeId
							}
							this.$api.delExplainAudio(params).then(res => {
								this.$tools.toast(res.msg);
								if (res.code == 200) {
									this.getData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			close() {
				this.formData = {
					name: '',
					keyword: '',
					oratory: '',
				}
				this.show = false
			},
		}
	}
</script>

<style lang="less">
	/deep/.u-navbar__content__title,
	{
	color: #fff;
	}



	.listBox {
		margin: 30rpx;
		overflow: hidden;
		font-size: 15px;

		.aList {
			max-height: 30vh;
			overflow: scroll;
		}

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.box {
				justify-content: space-between;
				align-items: center;
			}

			.icon1 {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50px;
				background: #45516d;
				color: #6468ff;
				line-height: 60rpx;
				text-align: center;
				font-family: fantasy;
				margin-right: 40rpx;
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 70%;

				.num {
					font-weight: 500;
				}
			}

			.edit {
				transform: rotate(90deg);
			}

			.item1 {
				background: #6a8bff;
				padding: 20rpx;
				margin-top: 35rpx;
			}
		}

	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0vw;
		background: #f7fbfe;
		z-index: 10;
		display: flex;
		justify-content: space-between;

		.btn {
			margin: 20rpx auto;
			width: 80vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn1 {
			background-color: #6a8bff;
		}
	}
</style>